{% extends "player/base.html" %}

{% block head %}


  <link rel="stylesheet" href="/static/js/autocomplete/jquery.autocomplete.css" type="text/css" />
    <link href="/static/js/ui/jquery-ui.css" rel="stylesheet" type="text/css"/>
     <script src="/static/js/ui/jquery-ui.min.js"></script>
  
  <script type="text/javascript" src="/static/js/autocomplete/jquery.bgiframe.min.js"></script>
  <script type="text/javascript" src="/static/js/autocomplete/jquery.dimensions.js"></script>  
  <script type="text/javascript" src="/static/js/autocomplete/jquery.autocomplete.js"></script>
<script language="javascript">
	
	add_player = function(){
		
		
		newp = $(document.createElement('p'));
		newsp = $(document.createElement('span'))
		
		newsp.text($('#search_friend').val())
		
		newp.append(newsp)
		
		outarrow = $(document.createElement('span')).addClass('outbutton').text('<')
		
		newp.append(outarrow)		
		$('#soccer_field').append(newp)
		
		newinput = $(document.createElement('input'));
		newinput.attr({'name':'friend','type':'hidden'})		
		newinput.val($('#search_friend').val())
		$('#match_form').append(newinput)
		
		$('#search_friend').val("");
		$('#search_friend').focus();
				
	}
	
	set_date = function(){	
		$('#id_date').val($("#datepicker").val());		
	}
	
	
</script>

<script type="text/javascript">
	
  $(document).ready(function(){  	
    
	$("#search_friend").autocomplete('{% url player_search %}',{ 
		dataType: "json",
		formatItem: function(row) {			
			return row;                    
		},
		 parse: function(data) {
		 		
                var array = new Array();
                for(var i=0;i<data.length;i++)
                {
                	array.push({data:data[i].email,value:data[i].email,result:data[i].email});
                }
                return array;
        },
		
		
	})
	
	$("#datepicker").datepicker({		
		dayNames : ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sabado'],
		dayNamesMin : ['Do','Lu','Ma','Mi','Jue','Vie','Sab'],
		dateFormat: 'yy-mm-dd',
		onSelect:set_date, 
		
	});
	
	$('#match_form').submit(function() {
  		//console.log($('#match_form').serialize())  		
  		return true;
	});
		  
  });
  
</script>
{% endblock %}

{% block main %}
<h2>Nuevo Partido</h2>

<div class="grid_5">
<div type="text" id="datepicker"></div>
</div>

<form method="POST" action="." id="match_form">

	<div class="grid_3">
		{{form.as_p}}
		<input class="button" type="submit" value="Crear"/>
	</div>	

	<div class="clear"></div>
</form>

<h2>Jugadores</h2>
<div class="grid_6">
	Busque por email
	<input id="search_friend" name="search_friend"></input> 
		<a class="button" href="javascript:add_player()">></a>
</div>

<div class="clear"></div>
<div id="soccer_field">
</div>
{% endblock %}

{% block sidebar %}
<p>Goleadores</p>
<p>Los magos</p>
<p>Los hachas</p>
<p>Turnos disponibles</p>
{% endblock %}